<template>
    <div class="mainpagemedicine">
        <div class="contentbox">
            <div class="searchbox">
                <form action="/">
                    <van-search
                        v-model="value"
                        shape="round"
                        background="#409EFF"
                        placeholder="请输入搜索关键词"
                    />
                </form>
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index2) in images" :key="index2">
                        <img v-lazy="image" height="200px" width="100%"/>
                    </van-swipe-item>
                </van-swipe>
                <div>
                    <van-grid :column-num="3">
                        <van-grid-item v-for="data in datas" :key="data.id" >
                        <router-link :to="'/medicinedetail/'+data.id" :key="$route.fullPath">
                        <van-image
                                round
                                width="2rem"
                                height="2rem"
                                :src="data.imgurl"
                            />
                        <div class="mainpagemedicine_columnbox">{{data.name}}</div>
                        </router-link>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
            <bottomBar />
        </div>
    </div>
</template>
<script>
import bottomBar from '../components/bottomBar.vue'

export default {
    data(){
        return{
            value: '',
            datas:[],
            images:[
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2708788078,2569650958&fm=26&gp=0.jpg',
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3573382944,2352961818&fm=26&gp=0.jpg',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171218%2F2a6f286c3b7742e596a6d3750270165a.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626749849&t=84a1a1fdfc32bf5dad6d21eec921e1fc',

            ]
        }
    },
    methods: {
        onSearch(val) {
            Toast(val);
        },
        getdata(){
            this.$axios.get("http://localhost:3000/medicine")
                .then(res =>{
                    // console.log(res.data)
                this.datas=res.data
                console.log(this.datas)
            })
        },
    },
    components: {
        bottomBar
    },
    mounted:function(){
        this.getdata();
    }
}
</script>

<style scoped>
.doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
.mainpagemedicine_columnbox{
    text-align: center;
    color: #000;
  }
</style>